import React, {Fragment, useEffect, useState} from 'react'
import { Form, Button, Popconfirm, Input, Modal,Row, Col} from 'antd'
import { connect } from 'umi'

const FormItem = Form.Item;

const formLayout = {
  labelCol: { span: 7 },
}

const Termination = (props) => {

  const { onSubmit, onCancel, visible,oid } = props
  const [form] = Form.useForm()
  const { TextArea } = Input;

  const onFormCancel = () => {
    form.resetFields()
    onCancel()
  }

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields()
    form.resetFields()
    onSubmit({...fieldsValue,oid:oid})
  }

  const renderContent = () => {
    return (
      <>
        <Row gutter={24}>
          <Col span={24}>
            <FormItem name="endRemark" labelCol={{span: 2}} label="终止原因" rules={[{required: true,message: '请输入终止原因！'}]}>
              <TextArea rows={8} className='widthStyle'/>
            </FormItem>
          </Col>
        </Row>
      </>
    )
  }

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Popconfirm title="是否确认终止？" cancelText='取消' okText='确认' onConfirm={handleSubmit}>
          <Button type="primary" >终止</Button>
        </Popconfirm>
      </>
    )
  }

  return (
    <Modal
      width={1280}
      destroyOnClose
      title="入职终止"
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
      okText="确认"
      cancelText="取消"
    >
      <Form {...formLayout} form={form}>
        {renderContent()}
      </Form>
    </Modal>
  )
}
export default connect(() => ({
}))(Termination)
